<template>
	<view class="active-user">
		<view class="header">
			<text class="title">请完善以下信息</text>
			<text class="subtitle">请填写真实信息以便激活会员</text>
		</view>

		<view class="form-container">
			<!-- 姓名输入框 -->
			<view class="input-item">
				<image src="/static/active/user.svg" style="width: 16px; height: 16px"></image>
				<input v-model="formData.name" :disabled="hasUserInfo" type="text" placeholder="请输入您的姓名" placeholder-class="placeholder" />
			</view>

			<!-- 身份证号输入框 -->
			<view class="input-item">
				<image src="/static/active/idCard.svg" style="width: 16px; height: 16px"></image>
				<input v-model="formData.idcard" :disabled="hasUserInfo" type="idcard" placeholder="请输入您的身份证号"
					placeholder-class="placeholder" />
			</view>

			<!-- 会员卡号输入框 -->
			<view class="input-item">
				<image src="/static/active/memberCard.svg" style="width: 16px; height: 16px"></image>
				<input v-model="formData.no" type="text" placeholder="请输入您的会员卡号" placeholder-class="placeholder" />
			</view>

			<!-- 会员卡密码输入框 -->
			<view class="input-item">
				<image src="/static/active/password.svg" style="width: 16px; height: 16px"></image>
				<input v-model="formData.selfPasswd" type="password" placeholder="请输入会员卡密码"
					placeholder-class="placeholder" />
			</view>

			<!-- 手机号输入框 -->
			<view class="input-item">
				<image src="/static/active/phone.svg" style="width: 16px; height: 16px"></image>
				<input v-model="formData.phone" :disabled="hasUserInfo" type="number" placeholder="请输入您的手机号" placeholder-class="placeholder" />
			</view>

			<!-- 验证码输入框 -->
			<!-- <view class="input-item verify-code">
				<image src="/static/active/verifyCode.svg" style="width: 16px; height: 16px;"></image>
				<input v-model="formData.verifyCode" type="number" placeholder="输入验证码"
					placeholder-class="placeholder" />
				<button class="get-code" @click="getVerifyCode" :disabled="counting > 0">
					{{ counting > 0 ? `${counting}s后重新获取` : '获取验证码' }}
				</button>
			</view> -->
			<text class="color-style-box">*
				单人版会员服务：一人一卡，此卡激活开通后，仅限激活信息本人使用，请知悉</text>

			<!-- 用户协议 -->
			<view class="agreement">
				<checkbox-group @change="changAgreement">
					<checkbox value="agreement" style="transform: scale(0.8)" color="#2CCBAE" />
					<text class="agreement-text">
						我已仔细阅读并同意
						<text class="link" @click="openAgreement">《用户协议》</text>
					</text>
				</checkbox-group>
			</view>

			<!-- 提交按钮 -->
			<button class="submit-btn" :class="{ disabled: !formData.agreement }" @tap="handleSubmit">
				激活会员
			</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, computed, onMounted } from "vue";
	import { activeEquityCard, authorizedUser } from "../../api/base.js";
	import { errorStatus, getWxToken, loginAuthorize, validateIDCard, validatePhone } from "../../api/hook.js";

	interface FormData {
		name : string;
		idcard : string;
		no : string;
		selfPasswd : string;
		phone : string;
		agreement : boolean;
	}

	// 表单数据
	const formData = reactive<FormData>({
		no: "",
		selfPasswd: "",
		name: "",
		phone: "",
		idcard: "",
		agreement: false,
	});

	// 用户信息
	let resInfo = reactive<any>({});

	// // 验证码倒计时
	// const counting = ref(0)

	// // 获取验证码
	// const getVerifyCode = () => {
	// 	if (counting.value > 0) return
	// 	if (!formData.phone) {
	// 		uni.showToast({
	// 			title: '请输入手机号',
	// 			icon: 'none'
	// 		})
	// 		return
	// 	}
	// 	// TODO: 调用获取验证码接口
	// 	counting.value = 60
	// 	const timer = setInterval(() => {
	// 		counting.value--
	// 		if (counting.value <= 0) {
	// 			clearInterval(timer)
	// 		}
	// 	}, 1000)
	// }

	// 打开用户协议
	const openAgreement = () => {
		// TODO: 跳转到用户协议页面
		uni.navigateTo({
			url: "/pageB/agreement/agreement",
		})

	};
	const changAgreement = (e) => {
		formData.agreement = e.detail.value[0] ? e.detail.value[0] : "";
	};

	const hasUserInfo = ref<boolean>(false);

	onMounted(() => {
		loadData();
	});

	const loadData = async () => {
		uni.showLoading({
			title: "加载中...",
			mask: true,
		});
		resInfo = await loginAuthorize();
		uni.hideLoading();
		hasUserInfo.value = resInfo.hasCustomer;
		formData.name = resInfo.customer.name ? resInfo.customer.name : "";
		formData.phone = resInfo.customer.phone ? resInfo.customer.phone : "";
		formData.idcard = resInfo.customer.idcard ? resInfo.customer.idcard : "";
	};

	// 提交表单
	const handleSubmit = () => {
		uni.showLoading({
			title: "提交中...",
			mask: true,
		});
		if (!formData.agreement) {
			uni.showToast({
				title: "请先同意用户协议",
				icon: "none",
			});
			return;
		}
		// TODO: 提交表单逻辑
		// loginAuthorize().then((resInfo : any) => {
		// 	let objParams = {};
		// if(hasUserInfo){
		// 	objParams = {
		// 		no: formData.no,
		// 		selfPasswd: formData.selfPasswd
		// 	}
		// }else {
		// 	objParams = {...formData};
		// }
		if(!validatePhone(formData.phone)) {
			uni.showToast({
				title: "手机号码格式错误",
				icon: "none"
			})
			return;
		}
		if(!validateIDCard(formData.idcard)) {
			uni.showToast({
				title: "身份证号格式错误",
				icon: "none"
			})
			return;
		}

		if(!formData.name || !formData.no || !formData.selfPasswd){
			uni.showToast({
				title: "请完善信息！",
				icon: "none"
			})
			return;
		}
		activeEquityCard(formData).then((resS) => {
			uni.hideLoading();
			if (resS.data.state === "ACTIVE_SUCCESS") {
				uni.showToast({
					title: "激活成功！",
					icon: "success",
				});
				uni.switchTab({
					url: "/pages/service/service",
				});
			} else {
				uni.showToast({
					title: errorStatus[resS.data.state] || "预约失败",
					icon: "error",
				});
			}
		});
		// })
	};
</script>

<style lang="scss" scoped>
	.active-user {
		min-height: 100vh;
		background-color: #fff;
		padding: 40rpx;

		.header {
			text-align: center;
			margin-bottom: 60rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 20rpx;
				display: block;
			}

			.subtitle {
				font-size: 28rpx;
				color: #999;
			}
		}

		.form-container {
			.input-item {
				position: relative;
				margin-bottom: 30rpx;
				background: #f8f8f8;
				border-radius: 12rpx;
				padding: 0 30rpx;
				height: 100rpx;
				display: flex;
				align-items: center;

				input {
					flex: 1;
					height: 100%;
					font-size: 28rpx;
					padding-left: 12px;
				}

				.icon {
					// font-family: "iconfont";
					// color: #2CCBAE;
					// font-size: 40rpx;
					// margin-right: 20rpx;
					display: inline-block;
				}

				&.verify-code {
					.get-code {
						background: #2ccbae;
						color: #fff;
						font-size: 24rpx;
						padding: 10rpx 30rpx;
						border-radius: 30rpx;
						margin-left: 20rpx;

						&[disabled] {
							background: #ccc;
						}
					}
				}
			}

			.placeholder {
				color: #999;
				font-size: 28rpx;
			}

			.agreement {
				display: flex;
				align-items: center;
				margin: 40rpx 0;

				.agreement-text {
					font-size: 24rpx;
					color: #666;
					margin-left: 10rpx;

					.link {
						color: #2ccbae;
					}
				}
			}

			.submit-btn {
				width: 100%;
				height: 90rpx;
				line-height: 90rpx;
				background: linear-gradient(to right, #2ccbae, #29e4c6);
				color: #fff;
				font-size: 32rpx;
				border-radius: 45rpx;
				text-align: center;
				margin-top: 60rpx;

				&.disabled {
					opacity: 0.6;
				}
			}
		}
	}

	.color-style-box {
		color: #29e4c6;
		font-size: 28rpx;
		font-weight: 500;
	}
</style>